<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../layuiadmin/layui/css/layui.css"
	media="all">
<!--  <link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">-->
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<body>
	<div class="demoTable">
		模糊检索：
		<div class="layui-inline">
			<input class="layui-input" name="id" id="demoReload"
				autocomplete="off">
		</div>
		<button class="layui-btn" data-type="reload">搜索</button>
	</div>

	<table class="layui-hide" id="test" lay-filter="test"></table>



	<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="edit">付款</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>

	<script src="../layuiadmin/layui/layui.js"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

	<script>
		layui.use('table', function() {
			var table = layui.table;

			table.render({
				elem : '#test',//
				url : '../../orderapi/pagedata/${userid}',//模拟接口
				toolbar : '#toolbarDemo',
				title : '订单数据表',
				cols : [ [ {
					type : 'checkbox',
					fixed : 'left'
				}, {
					field : 'orderid',
					width : 80,
					title : '订单ID',
					sort : true
				}, {
					field : 'orderno',
					width : 300,
					title : '订单编号',
					sort : false
				}, {
					field : 'tel',
					width : 130,
					title : '手机号',
					sort : false,
					templet : function(d) {
						return d.user.tel;
					}
				}, {
					field : 'username',
					width : 100,
					title : '用户姓名',
					sort : false,
					templet : function(d) {
						return d.user.username;
					}
				}, {
					field : 'orderprice',
					width : 100,
					title : '价格/￥'
				}, {
					field : 'orderstatus',
					width : 100,
					title : '订单状态',
					templet : function(d) {
						return d.orderstatus == 1 ? "已完成" : "已取消";
					}
				}, {
					field : 'attname',
					width : 80,
					title : '景点名'
				}, {
					field : 'orderdate',
					title : '下单时间',
					minWidth : 180
				},
				//{ field: 'orderDate', title: '预定天数' }, 
				{
					fixed : 'right',
					title : '操作',
					toolbar : '#barDemo',
					width : 150
				} ] ],
				page : true,
				id : 'testReload'
			});

			//头工具栏事件
			table.on('toolbar(test)', function(obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				//					switch(obj.event) {
				//						case 'getCheckData':
				//							var data = checkStatus.data;
				//							layer.alert(JSON.stringify(data));
				//							break;
				//						case 'getCheckLength':
				//							var data = checkStatus.data;
				//							layer.msg('选中了：' + data.length + ' 个');
				//							break;
				//						case 'isAll':
				//							layer.msg(checkStatus.isAll ? '全选' : '未全选');
				//							break;
				//					};
			});

			<!--搜索框的模糊检索功能-->
			var $ = layui.$, active = {
				reload : function() {
					var demoReload = $('#demoReload');
					//执行重载
					table.reload('testReload', {
						page : {
							curr : 1
						//重新从第 1 页开始
						},
						where : {
							/* key: {  //key可以看成是一个对象，大括号里可以有多对键和值，
							   id: demoReload.val()//id是自己写的模糊查询方法的参数名
							 }*/
							content : demoReload.val()
						}
					});
				}
			};
			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

			//监听行工具事件
			table.on('tool(test)', function(obj) {
				var data = obj.data;
				//console.log(obj)
				if (obj.event === 'del') {
					layer.confirm('真的删除行么', function(index) {
						obj.del();
						layer.close(index);
						
					});
				} else if (obj.event === 'edit') {
					layer.prompt({
						formType : 2,
						value : data.email
					}, function(value, index) {
						obj.update({
							email : value
						});
						layer.close(index);
					});
				}
			});
		});
	</script>

</body>

</html>